<template>
	<view>
<!-- 		<view class="lb-search">
			<u-search height="80rpx" bgColor="#fff" placeholderColor="#333" color="#333" placeholder="搜到商品名称"
				v-model="keyword" :showAction="false" @search="search"></u-search>
		</view> -->

		<!-- 分类商品 -->
		<view class="box-main">
			<!-- 左边分类 -->
			<scroll-view scroll-y="true" class="box-left" :scroll-top="leftTop" :scroll-with-animation="true">
				<view class="left-item" :class="leftState == index?'active':''" v-for="(item,index) in leftData"
					:key="index" :data-id="`c_${item.id}`" :data-index="index" @tap="leftTap">
					{{item.name}}
				</view>
			</scroll-view>
			<!-- 右边列表 -->
			<scroll-view :scroll-y="true" class="box-right" :scroll-into-view="currentScrollId"
				:scroll-with-animation="true" @scroll="bindscroll">

				<view class="lb-list" v-for="(item,index) in rightData" :key="index" :id="`c_${item.id}`"
					:data-id="`c_${item.id}`" :data-index="index">
					<view class="right-title">
						{{item.name}}
					</view>
					<u-loadmore v-if="item.goods.length < 1" loadmoreText="暂无数据" color="#999" lineColor="#999" dashed
						line />
					<view class="right-item" v-for="(val,key) in item.goods" :key="key">
						<view class="item-img" @click="goTo('/pages/xi-hu/goods-detail/goods-detail?id=' + val.id)">
							<image :src="getImgsUrl(val.cover_image)" mode="aspectFill"></image>
						</view>
						<view class="item-info">
							<view class="name">
								{{val.name}}
							</view>
							<view class="btn" v-if="item.type == 1">
								组合套餐
							</view>
							<view class="price">
								<view class="left">
									{{val.a_price || val.price || ''}}
								</view>
								<view class="img" style="z-index: 9999;" @click="addCar(val)">
									<image src="/static/icon/jia.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>

				</view>
			</scroll-view>
		</view>
		<view class="lb-car" @click="goTo('/pages/xi-hu/clothes-basket/clothes-basket')">
			<view class="car-item">
				<u-badge absolute :offset="[-5,-5]" max="99" :value="carNum"></u-badge>
				<u-icon name="shopping-cart" size="28" color="#00D26E"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getWashGoodsApiList,
		addCarApi,
		getCarNumApi
	} from "@/api/apis/wash.js"
	import {
		setImgUrl
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
				id: 0,
				leftState: 0,
				leftTop: 0,
				leftTtemHeight: 0,
				currentScrollId: '',
				heightArr: 0,
				zindex: 0,
				oneShow: true,

				keyword: '',
				leftData: [],
				rightData: [],
				carNum: 0,


			}
		},
		methods: {
			//加入购物车
			addCar(item) {
				let _this = this;
				uni.showLoading({
					title: "提交中",
					mask: true
				});
				addCarApi({
					goods_id: item.id
				}).then(res => {
					uni.hideLoading();
					_this.$u.toast('加入成功!');
					setTimeout(() => {
						this.getCarNum();
					}, 1000)
				})

			},
			//加入购物车
			getCarNum() {
				let _this = this;
				uni.showLoading({
					title: "加载中",
					mask: true
				});
				getCarNumApi().then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.carNum = res.data.car_count;
					}
				})

			},
			//点击跳转喵点
			leftTap(e) {
				let index = e.currentTarget.dataset.index;
				let id = e.currentTarget.dataset.id;
				this.leftState = index;
				this.currentScrollId = id;
			},
			//滑动改变左边喵点
			bindscroll(e) {
				let zindex = this.zindex;
				let oneShow = this.oneShow;
				let scrollTop = e.detail.scrollTop;
				let scrollArr = this.heightArr;

				for (let i = 0; i < scrollArr.length; i++) {

					if (scrollTop >= 0 && scrollTop < scrollArr[0]) {

						if (oneShow) {
							// console.log('==============aaa' + scrollTop + "==" + scrollArr[0]);
							this.leftState = 0;
							this.leftTop = 0;
							this.zindex = 0;
							this.oneShow = false;
							return
						}

					} else if (scrollTop >= (scrollArr[i - 1]) && scrollTop < scrollArr[i]) {
						if (i != zindex) {
							// console.log('==============bbb' + i + scrollTop + "==" + scrollArr[i]);
							this.oneShow = true;
							this.zindex = i;
							this.leftState = i;
							this.leftTop = i * this.leftTtemHeight
						}
					}

				}

			},
			getImgUrl(url) {
				return setImgUrl(url);
			},
			//
			getImgsUrl(str) {
				let url = str;
				if (str.indexOf(',') != -1) {
					let arr = str.split(',');
					url = arr[0];
				};
				return setImgUrl(url);
			},
			//搜索
			search() {},
			//跳转
			goTo(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			},
			//左边切换
			clickTab(i) {
				this.leftState = i;
			},
			//列表
			getList() {
				return new Promise((resolve, reject) => {
					getWashGoodsApiList().then(res => {
						this.leftData = res.data;
						this.rightData = res.data;
						resolve();
					})
				});
			},
			myInitialize() {
				let that = this;
				return new Promise((resolve, reject) => {
					let h = 0;
					let heightArr = [];
					uni.createSelectorQuery().select('.left-item').boundingClientRect(function(
						rect) { //select会选择第一个类目的盒子
					}).exec(function(res) {
						that.leftTtemHeight = res[0].height
					});

					uni.createSelectorQuery().selectAll('.lb-list').boundingClientRect(function(
						rect) {
						//selectAll会选择所要含有该类名的盒子
					}).exec(function(res) {
						res[0].forEach((item) => {
							h += item.height;
							heightArr.push(h);
						})
						that.heightArr = heightArr;
					})
					resolve();
				})
			},
			async asyncTo() {
				await this.getList();
				await this.myInitialize();
				this.getCarNum();
				this.toLeft();

			},
			toLeft() {
				this.currentScrollId = 'c_' + this.id;
			}
		},
		onLoad(options) {
			this.id = options.id && options.id != undefined ? options.id : 0
			
		},
		onShow() {
			this.asyncTo();
		}
	}
</script>

<style lang="scss">
	.lb-search {
		padding: 32rpx;
	}

	.box-main {
		width: 100%;

		display: flex;
		flex-direction: row;

		//左边
		.box-left {
			width: 220rpx;
			display: flex;
			flex-direction: column;
			height: calc(100vh - 144rpx);
			padding-bottom: 50rpx;
			box-sizing: border-box;


			.left-item {
				width: 220rpx;
				height: 120rpx;
				font-size: $main-font-28;
				line-height: 40rpx;
				color: $main-font-color;
				line-height: 118rpx;
				text-align: center;
			}

			.active {
				font-weight: bold;
				color: #00D26E;
				border-left: 6rpx solid #00D26E;
				background-color: $main-bg-color;
				box-sizing: border-box;
			}
		}

		//右边
		.box-right {
			background-color: $main-bg-color;
			width: calc(100% - 220rpx);
			height: calc(100vh - 144rpx);
			padding: 24rpx 38rpx 50rpx 24rpx;
			box-sizing: border-box;

			.lb-list {

				.right-title {
					font-size: $main-font-28;
					font-weight: bold;
					color: $main-font-color;
					padding-top: 24rpx;
				}

				.right-item {
					background-color: $main-bg-color;
					box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
					opacity: 1;
					border-radius: 16rpx;
					box-sizing: border-box;


					display: flex;
					flex-direction: row;
					margin-top: 32rpx;

					.item-img {
						width: 180rpx;
						height: 180rpx;
						box-sizing: border-box;

						image {
							border-radius: 16rpx 0 0 16rpx;
						}
					}

					.item-info {
						display: flex;
						flex-direction: column;
						justify-content: space-around;
						width: calc(100% - 180rpx);
						padding-left: 24rpx;

						.name {
							font-size: $main-font-28;
							font-weight: 400;
							color: $main-font-color;
						}

						.btn {
							border: 2px solid #F67F7D;
							background: linear-gradient(131deg, #F7583F 0%, #F28F4C 100%);
							font-size: $main-font-18;
							font-weight: 400;
							color: $main-font-color-white;
							border-radius: 16rpx;
							width: 96rpx;
							height: 30rpx;
							line-height: 28rpx;
							text-align: center;
						}

						.price {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
							padding: 12rpx 24rpx 0 0;

							.left {
								&::before {
									content: '¥';
									font-size: $main-font-20;
								}

								font-size: $main-font-36;
								font-weight: bold;
								color: #F65D40;


							}

							.img {
								width: 40rpx;
								height: 40rpx;
							}
						}
					}
				}
			}
		}
	}

	.lb-car {
		position: fixed;
		right: 10rpx;
		bottom: 150rpx;
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 2rpx 2rpx 2rpx 2rpx rgba(0, 0, 0, 0.16);
		z-index: 99999;

		.car-item {
			position: relative;
		}
	}
</style>